<template>
	<view class="address-content">
		<TopBar :indexflag="true" :combakflag="true" :lang="false" :bottom="true" title="地址"
			barstyle="background-color:rgba(0,0,0,0)"></TopBar>
		<HeaderTitle :title="$t('DeliveryAddress')" :bottom="true" :lang="false" :mobile="false" :combakflag="true">
		</HeaderTitle>
		<view class="empity-address" v-if="addressList.length==0">
			<view class="icon-box" @click="addaddress">
				<u-icon name="plus" color="#999" size="32"></u-icon>
			</view>
			<text>{{$t('AddressContent')}}</text>
		</view>
		<view class="address-box" :dir="i18nLocale=='ug'?'rtl':''">
			<view class="address" v-if="addressList.length!=0" v-for="(item,index) in addressList">
				<view class="left">

					<view class="address-number">{{item.detail}}</view>
					<view class="address-title" v-if="item.community">
						{{i18nLocale=='ug'?item.community.ug_name:item.community.cn_name}}
					</view>
					<view class="user">
						<view class="name">{{item.name}}</view>
						<view class="pone">{{item.mobile}}</view>
					</view>
				</view>
				<view class="right">
					<view class="buttons">
						<!-- <view class="" @click="editAddress(item.id)" >{{$t('Edit')}}</view>
						<view class="copy">{{$t('Copy')}}</view>
						<view class="" @click="deleteAddress(item.id)"  >{{$t('Delete')}}</view> -->
						<u-icon name="edit-pen" @click="editAddress(item.id)" color="#999" size="25"></u-icon>
						<u-icon name="trash" @click="deleteAddress(item.id)" color="#999" size="25"></u-icon>
					</view>
					<view class="default">
						<label class="radio" :style="{color:item.current?'#15c45b':''}"
							@click="putdefault(item.id,index)">
							<radio style="transform:scale(0.9)" :checked="item.current" color="#15c45b" /> <text
								style="padding: 0rpx 10rpx;">{{$t('DefaultAddress')}}</text>
						</label>
					</view>

				</view>
			</view>
		</view>
		<view class="bottom-add" @click="addaddress">
			<u-icon name="plus-circle" color="#45BC1B" size="28"></u-icon>
			<text>{{$t('AddAddress')}}</text>
		</view>
		<Loading :show="loadshow" :text="$t('Loading')"></Loading>
	</view>
</template>

<script>
	import TopBar from "@/components/TopBar.vue"
	import HeaderTitle from "@/components/HeaderTitle.vue"

	import {
		getaddress,
		deleteaddress,
		putaddress
	} from '@/api/all.js';

	export default {
		components: {
			TopBar,
			HeaderTitle
		},
		data() {
			return {
				addressList: [],
				loadshow: false
			}
		},
		onShow() {
			this.getAddress();
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('DeliveryAddress')
			})
		},
		computed: {
			i18nLocale() {
				return this.$i18n.locale;
			},
			storeValue() {
				return this.$store.state.address;
			}
		},
		methods: {
			//新增地址
			addaddress() {
				uni.navigateTo({
					url: '/pages/me/address/add_address'
				})
			},
			//获取地址
			getAddress() {
				this.loadshow = true;
				getaddress({}).then((res) => {
					if (res.code == 200) {
						this.addressList = res.body.data;
						this.loadshow = false;
						this.$store.commit('setUseraddress', this.addressList);
					}

				})
			},
			//删除地址
			deleteAddress(id) {
				deleteaddress({
					id: id
				}).then((res) => {
					this.getAddress();
				})
			},
			editAddress(id) {
				uni.navigateTo({
					url: '/pages/me/address/add_address?id=' + id
				})
			},
			//设置为默认
			putdefault(id, acindex) {
				console.log(this.$store.state.addaddress)
				let newarr = this.addressList.map((item, index) => {
					if (index == acindex) {
						item.current = true;
						console.log(item, '+++++++')
						this.$store.commit('setAddress', item.community);
					} else {
						item.current = false;
					}
					return item;
				})
				this.addressList = newarr;
				console.log(this.$store.state.addaddress)
				putaddress({
					id: id,
					current: true,
				}).then((res) => {

				})
			},


		}
	}
</script>

<style lang="scss" scopd>
	.address-content {
		width: 100%;
		height: 100vh;

		.empity-address {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 100rpx;

			.icon-box {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 50rpx;
				border: 4rpx dashed $uni-text-color-grey;
				border-radius: 20rpx;
			}

			text {
				color: $uni-text-color-grey;
				font-size: $uni-font-size-base;
				padding-top: 30rpx;
			}
		}

		.address-box {
			width: 100%;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.address {
				border-bottom: 2rpx solid #eff1f6;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				padding: 30rpx 0rpx;
				background-color: #fff;
				width: 100%;
				padding: 10rpx 40rpx;
				box-sizing: border-box;
				margin-top: 20rpx;
				border-radius: 20rpx;

				.left {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.user {
						display: flex;
						padding-top: 10rpx;

						.name {
							color: #15c45b;
							font-weight: bold;
							font-size: $uni-font-size-lg;
						}

						.pone {
							padding: 0rpx 40rpx;
							box-sizing: border-box;
							color: $uni-text-color-grey;
							font-size: $uni-font-size-base;
						}

					}

					.address-title {
						margin-top: 10rpx;
						color: $uni-color-paraphrase;
						font-size: $uni-font-size-base;
					}

					.address-number {
						margin-top: 10rpx;
						color: $uni-text-color-grey;
						font-size: $uni-font-size-sm1;
					}
				}

				.right {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-top: 1rpx solid $uni-color-parbg;
					margin-top: 10rpx;
					padding: 10rpx 0rpx;

					.buttons {
						width: 30%;
						display: flex;
						justify-content: space-between;
						color: $uni-text-color-grey;
						font-size: $uni-font-size-base;
						font-weight: 300;

						view {
							box-sizing: border-box;
							padding: 0rpx 10rpx;
						}

						.copy {
							// border-left: 1rpx solid $uni-text-color-grey;
							// border-right: 1rpx solid $uni-text-color-grey;
						}
					}

					.default {
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;

					}

				}

			}
		}


		.bottom-add {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;

			text {
				padding: 0rpx 30rpx;
				color: $uni-color-topic;
				font-size: $uni-font-size-base;
			}
		}
	}
</style>